<template>
  <div class="c-table-seting">
    <div class="c-table-seting-btn">
      <slot name="title"></slot>
      <!-- 点击新增 给弹框  Object.assign(formData.value, {}) -->
      <!-- 如果有默认值  在{key: value}添加 -->
      <a-button v-if="props.options.addBtn" type="primary" @click="addClick">新增</a-button>
      <a-popconfirm :disabled="selectList.length == 0" v-if="props.options.removeBtn" title="是否确定删除选中项?" ok-text="是" cancel-text="否" @confirm="onSelectRemove">
        <a-button type="primary" danger :disabled="selectList.length == 0">删除</a-button>
      </a-popconfirm>

      <slot name="header"></slot>
    </div>
    <div class="c-table-seting-right" v-if="props.options.customize ? props.options.customize : true">
      <a-tooltip>
        <template #title>是否显示斑马纹</template>
        <a-switch checked-children="开" un-checked-children="关" v-model:checked="seting.tableStripedChecked" @change="setItem('tableStripedChecked', $event)" />
      </a-tooltip>
      <div class="c-table-seting-right-iocn">
        <div class="c-table-seting-right-iocn-divider"></div>
        <a-tooltip>
          <template #title>刷新</template>
          <ReloadOutlined />
        </a-tooltip>
        <a-tooltip>
          <template #title>密度</template>
          <a-popover placement="bottomRight" v-model:visible="tableSizeVisible" trigger="click">
            <template #content>
              <p :class="[seting.tableSize == item ? 'table-size-options table-size-options-active' : 'table-size-options']" v-for="(item, index) in seting.tableSizeList" :key="index" @click="setTableSize(item)">
                {{ item == 'default' ? '默认' : item == 'middle' ? '中等' : item == 'small' ? '紧凑' : '其他' }}
              </p>
            </template>
            <ColumnWidthOutlined class="t-x-90" />
          </a-popover>
        </a-tooltip>
        <a-tooltip>
          <template #title>设置</template>
          <a-popover placement="bottomRight" v-model:visible="tableSetingVisible" trigger="click">
            <template #content>
              <VueDraggableNext animation="300" filter=".forbid" v-if="agencyColumns" v-model="agencyColumns">
                <p class="table-seting-options" v-for="(item, index) in agencyColumns" :key="index">
                  <BorderLeftOutlined />
                  <a-checkbox v-model:checked="item.checked">{{ item.title }}</a-checkbox>
                </p>
              </VueDraggableNext>
            </template>
            <template #title>
              <a-checkbox v-model:checked="isAllChecked" @change="onCheckAllChange">列展示/排序</a-checkbox>
              <span class="table-seting-reset" @click="rsetColumns">重置</span>
            </template>
            <SettingOutlined />
          </a-popover>
        </a-tooltip>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup name="CtableTitle">
import { getItem, setItem } from '@/libs/utils/storage'
import { ReloadOutlined, ColumnWidthOutlined, SettingOutlined, BorderLeftOutlined } from '@ant-design/icons-vue'
import { TableColumnType } from './types'
import { VueDraggableNext } from 'vue-draggable-next'
import _ from 'lodash'

const props = defineProps({
  options: {
    type: Object,
    default: () => ({}),
    required: true
  },
  columns: {
    type: Array as () => TableColumnType[],
    required: true
  },
  crudModalVisible: {
    type: Boolean,
    required: true
  }
})

const emits = defineEmits(['update:agencyColumns', 'selectRemoveBtn', 'updateColumns', 'addClick'])

const addClick = () => {
  emits('addClick', true)
}

// 初始化备份列头
const backupsColumns = _.cloneDeep(props.columns)
backupsColumns.map((item: any) => (item.checked = true))

// 代理列头数据
const agencyColumns = ref(_.cloneDeep(props.columns))
agencyColumns.value.map((item: any) => (item.checked = true))

// 计算全选
const isAllChecked = ref(false)
watchEffect(() => {
  if (agencyColumns.value.some((item: any) => item.checked == false)) {
    isAllChecked.value = false
  } else {
    isAllChecked.value = true
  }
  const showColumns = agencyColumns.value.filter((r) => r.checked === true)
  emits('updateColumns', showColumns)
})
// 重置列头数据
const rsetColumns = () => {
  agencyColumns.value = _.cloneDeep(backupsColumns)
}

const onCheckAllChange = (value: any) => {
  if (value.target.checked) agencyColumns.value.map((item: any) => (item.checked = true))
  else agencyColumns.value.map((item: any) => (item.checked = false))
}

const tableSizeVisible = ref(false)
const tableSetingVisible = ref(false)

const seting = reactive({
  tableSize: getItem('tableSize') ? getItem('tableSize') : 'middle', //default | middle | small
  tableSizeList: ['small', 'middle', 'default'],
  tableStripedChecked: getItem('tableStripedChecked') ? getItem('tableStripedChecked') : false,
  columnsShow: false
})

// 设置表格密度
const setTableSize = (size: string) => {
  seting.tableSize = size
  setItem('tableSize', size)
}

// 被选中的数据
const selectList = ref<Array<any>>([])

// 选择删除事件
const onSelectRemove = () => {
  emits('selectRemoveBtn', selectList)
}

const setSelectList = (selectedRows: (string | number)[]) => {
  selectList.value = selectedRows
}

// 监听列头数据变化
watch(agencyColumns, (newVal) => {
  emits('update:agencyColumns', newVal)
})

defineExpose({
  seting,
  setSelectList
})
</script>

<style lang="less">
@import './index.less';
</style>
